<template>
  <div class="roleManageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
            <el-row :gutter="20">
              <el-col :span="5">
                <div class="searchWrap">
                  <span class="searchFont">角色名称:</span>
                  <span class="searchInputFont">
                    <el-input clearable size="mini" v-model="searchInfo.roleName" @change="searchRowsInfo(true)" auto-complete="off" placeholder="角色名称"></el-input>
                </span>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="searchWrap">
                  <span class="searchFont">角色状态:</span>
                  <span class="searchInputFont">
                    <el-select v-model="searchInfo.roleStatus" @change="searchRowsInfo(true)" size="mini" clearable placeholder="角色状态">
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                        </el-option>
                    </el-select>
                </span>
                </div>
              </el-col>
              <!-- <el-col :span="5">
                <div class="searchWrap">
                  <span class="searchFont">角色类型:</span>
                  <span class="searchInputFont">
                    <el-select v-model="searchInfo.roleType" @change="searchRowsInfo(true)" size="mini" clearable placeholder="角色类型">
                       <el-option
                         v-for="item in options1"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                        </el-option>
                    </el-select>
                </span>
                </div>
              </el-col> -->
              <div style="float: right;padding-right: 20px;">
                  <el-button type="primary" size="small" @click="searchRowsInfo()">查询</el-button>
                  <addRoleBtn v-if="$store.state.btnMenuIds.indexOf(173)>-1"  @searchRowsInfo="searchRowsInfo"></addRoleBtn>
              </div>

            </el-row>
        </div>
      </div>
      <div class="tableContainer">
        <div class="tableInner" ref="tableInnerWrap">
          <el-table
            ref="multipleTable"
            :data="rows"
            :height="tableHeight"
            stripe
            style="width: 100%"
          >
            <el-table-column
              label="角色名称"
              prop="roleName"
              show-overflow-tooltip
            >
            </el-table-column>
            <!-- <el-table-column
              prop="enterpriseName"
              label="角色类型"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{scope.row.roleType==1 ? '市交通局' : scope.row.roleType==2 ? '市交警局' : scope.row.roleType==3 ? '市城管局' : scope.row.roleType==4 ? '区政府' : ''}}

              </template>
            </el-table-column> -->
            <el-table-column
              prop="roleStatus"
              label="状态"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.roleStatus==1 ? '启用' :scope.row.roleStatus==2 ? '禁用' : ''}}

              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="createTime"
            >
            </el-table-column>

            <el-table-column
              label="操作"
              width="260px"
            >
              <template slot-scope="scope">
                <el-tooltip :visible-arrow="false" class="item" effect="dark" content="停用" placement="top-start">
                  <i v-show="$store.state.btnMenuIds.indexOf(170)>-1&&scope.row.roleStatus==1" @click="handleEdit(scope.row,false)" class="iconfont icon-tingyong" ></i>
                </el-tooltip>
                <el-tooltip :visible-arrow="false" class="item" effect="dark" content="启用" placement="top-start">
                  <i v-show="$store.state.btnMenuIds.indexOf(171)>-1&&scope.row.roleStatus==2" @click="handleEdit(scope.row,true)" class="iconfont icon-qiyong" ></i>
                </el-tooltip>
                <el-tooltip :visible-arrow="false" class="item" effect="dark" content="权限管理" placement="top-start">
                  <i v-if="$store.state.btnMenuIds.indexOf(167)>-1" @click="$refs.relatedMenuBtn.dialogOpen(scope.row)" class="iconfont icon-guanliancaidan" style="margin-left: 10px;"></i>
                </el-tooltip>
                <!--<i @click="$refs.setRoleBtn.dialogOpen(scope.row)" class="iconfont icon-bianji1" style="margin-left: 10px;"></i>-->
                <i v-if="$store.state.btnMenuIds.indexOf(172)>-1" @click='handleDelete(scope.row)' class="iconfont icon-shanchu" style="margin-left: 10px;"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 30, 50, 100,200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
          </el-pagination>
        </div>
        <!--修改角色2-->
        <el-dialog @opened="$store.commit('dialogTop')" title="修改角色" :visible.sync="dialogFormVisible"  @close="editDialogClose('ruleFormEdit')">

          <el-form :model="ruleFormEdit" :rules="rulesEdit" ref="ruleFormEdit" label-width="80px" class="demo-ruleForm">
            <el-form-item label="角色名称" prop="roleName">
              <el-input size='mini' v-model="ruleFormEdit.roleName" auto-complete="off" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="description">
              <el-input size='mini' v-model="ruleFormEdit.description" placeholder="请描述一下该角色" type="textarea" style="width:100%;" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select style="width:100%" v-model="ruleFormEdit.state" size='mini' clearable placeholder="请选择标是否启用">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item></el-form-item>
            <div style="text-align: center;">
              <el-button type="primary" @click="submitFormEdit('ruleFormEdit')">提交</el-button>

              <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
          </el-form>

        </el-dialog>
      </div>
    </div>
    <setRoleBtn ref="setRoleBtn" @searchRowsInfo="searchRowsInfo"></setRoleBtn>
    <relatedMenuBtn ref="relatedMenuBtn" @searchRowsInfo="searchRowsInfo"></relatedMenuBtn>
  </div>
</template>


<script>
  import addRoleBtn from "./addRoleBtn.vue"
  import setRoleBtn from "./setRoleBtn.vue"
  import relatedMenuBtn from "./relatedMenuBtn.vue"

  export default {

    data(){

      return {
        roleId: '',  //角色ID
        options: [{
          value: '1',
          label: '启用'
        }, {
          value: '2',
          label: '禁用'
        }],
        options1: [{
          value: '1',
          label: '市交通局'
        }, {
          value: '2',
          label: '市交警局'
        }, {
          value: '3',
          label: '市城管局'
        }, {
          value: '4',
          label: '区政府'
        }],
        rows: [],
        tableHeight: "200",
        currentRow: null,
        pageSize: 10,
        loading: true,
        count: 0,
        currentPage: 1,
        //以下为搜索
        value6: "",
        searchInfo: {
          roleName:"",
          agencyId:"",
          roleType:"",
          roleStatus:""
        },
        // 编辑添加表单
        dialogFormVisible: false,
        ruleFormEdit: {
          state: " ",
          roleName: "",
          enterpriseNo: "",
          description: "",
          id: ""
        },
        formLabelWidth: '100px',
        rulesEdit: {

        }
      }
    },
    components: {
      addRoleBtn,
      relatedMenuBtn,
      setRoleBtn
    },
    created(){

      this.searchRowsInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".roleManageWrap").clientHeight - 160

      })
    },
    methods: {
      //关闭回调
      editDialogClose(formName){
        this.$refs[formName].resetFields();
      },

      submitFormEdit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            this.handleDiaSure()

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //表单重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.ruleFormEdit.roleName = ""
        this.ruleFormEdit.description = ""
      },
      //编辑
      handleEdit(row,key){
        let msg,url
        if(key){   //启用
          msg='确认启用角色 “' + row.roleName + '” , 是否继续?'
          url="enableRoleByRoleId"
        }else {
          msg='确认禁用角色 “' + row.roleName + '” , 是否继续?'
          url="disableRoleByRoleId"
        }
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + `/system/`+url,{roleId:row.roleId})
            .then(response => {
              const result = response.data
              if (result.code === 200) {
                this.searchRowsInfo()
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
              }
            })

          //删除当前
        }).catch(() => {

        });
      },
      //修改角色 关闭对话框的并确认回调
      handleDiaSure(){
        this.dialogFormVisible = false
        let url = process.env.API_HOST + `/ulinkRole/update?id=${this.ruleFormEdit.id}&roleName=${encodeURI(this.ruleFormEdit.roleName)}&description=${encodeURI(this.ruleFormEdit.description)}&state=${this.ruleFormEdit.state}&enterpriseNo=${this.ruleFormEdit.enterpriseNo}`
        this.axios.get(url, {withCredentials: true})
          .then(response => {
            const result = response.data
            if (result.state === 0) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
            } else {
              this.$message({
                type: 'warning',
                message: result.message
              });
            }
            this.searchRowsInfo()
          })
          .catch(error => {
            console.log(error);
          });
      },
      handleDelete(row){
        this.$confirm('确认删除用户 “' + row.roleName + '” , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + `/system/delRoleByRoleId`,{roleId:row.roleId})
            .then(response => {
              const result = response.data
              if (result.code === 200) {
                this.searchRowsInfo()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
            })

          //删除当前
        }).catch(() => {

        });
      },

      //表格翻页等
      handleSizeChange(val) {
        this.pageSize = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.searchRowsInfo()
      },
      //获取所有信息
      searchRowsInfo(key){
        if(key){
          this.currentPage = 1;
        }
        this.axios.post(process.env.API_HOST + `/system/selectRoleGrid`,{
          page: this.currentPage,
          rows: this.pageSize,
          roleName:this.searchInfo.roleName,
          agencyId:this.searchInfo.agencyId,
          roleStatus:this.searchInfo.roleStatus,
          roleType:this.searchInfo.roleType,
        })
          .then(response => {
            const result = response.data
            if(result.code==200){
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
    },

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .roleManageWrap
    page()

</style>
